<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .nav{
            position:fixed;
            top:200px;
            right:30px;
            background-color:orange;
            display:flex;
            flex-direction:column;
        }
        .nav span{
            width:30px;
            height:70px;
            line-height:70px;
            text-align:center;
            border:1px solid rgb(0,0,0,.3);
        }
        .box{
            height:500px;
            margin-top:30px;
            font-size:80px;
            font-weight:800;
            color:white;
            line-height:500px;
            text-align:center;
            background-color:rgb(106, 106, 184);
        }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="nav">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>

    <script src="./common.js"></script>
    <script>
        var aBox=$$('.box');
        var aNav=$$('.nav span ')
        var timer;


        aNav.forEach(function(item,idx){
            aNav[idx].addEventListener('click',function(){
            moveScroll(getPosition(aBox[idx]).top);
            },false);
        });
        

        document.addEventListener('mousewheel',function(){
            clearInterval(timer);
        },false)//***********
        
        function moveScroll(targetTop){   //目标视窗高度
            var scrollTop;//当前视窗高度
            var speed;
            
            // document.documentElement.scrollTop=targetTop;

            clearInterval(timer);
            timer=setInterval(function(){
                scrollTop=document.documentElement.scrollTop;
                speed=(targetTop-scrollTop)/10;
                // console.log(speed);

                if(Math.abs(targetTop-scrollTop)<15){
                    clearInterval(timer);
                    document.documentElement.scrollTop=targetTop;
                    return false;
                }
                document.documentElement.scrollTop=scrollTop+speed;
                console.log(timer);
            },1000/90)
        }
    </script>
</body>
</html>